<template>
  <div class="conetr">
    <div class="center-board">
      <div class="center-title">
        <h3>设计方案</h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
        <el-button
          icon="Download"
          type="success"
          plain
          @click="handleSubmit"
          :disabled="!canEdit"
          :loading="loading"
        >
          保存
        </el-button>
      </div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="150px"
        class="form"
        :disabled="!canEdit"
      >
        <el-form-item label="装修风格" prop="decorationStyle">
          <el-select v-model="formData.decorationStyle" placeholder="请选择装修风格">
            <el-option
              v-for="item in decorationStyleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="平面布局图">
          <MultiImageUpload
            v-model="formData.layoutPlanFile"
            :disabled="!canEdit"
            v-model:loading="layoutPlanFileLoading"
          />
        </el-form-item>
        <el-form-item label="施工图">
          <MultiImageUpload
            v-model="formData.constructionDrawingFile"
            :disabled="!canEdit"
            v-model:loading="constructionDrawingFileLoading"
          />
        </el-form-item>
        <el-form-item label="水电图">
          <MultiImageUpload
            v-model="formData.plumbingElectricalDrawingFile"
            :disabled="!canEdit"
            v-model:loading="plumbingElectricalDrawingFileLoading"
          />
        </el-form-item>
        <el-form-item label="效果图">
          <MultiImageUpload
            v-model="formData.renderingsFile"
            :disabled="!canEdit"
            v-model:loading="renderingsFileLoading"
          />
        </el-form-item>
        <el-form-item v-if="formData.remark" label="驳回理由">
          <el-input v-model="formData.remark" disabled placeholder="" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";

import { ElMessage, UploadProps } from "element-plus";
import UserAPI, { UserForm } from "@/api/system/user";
import RoleAPI from "@/api/system/role";
import HouseAPI, { ConsumerHouseDesignLinkForm, ConsumerHouseDesignSchemeForm } from "@/api/house";
import CommonAPI, { AllMaterialCategoryForm, MaterialCategoryForm } from "@/api/system/common";
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData", "backTo"]);
import { useDictStore } from "@/store";
const dictStore = useDictStore();
const decorationStyleOptions = dictStore.getDictionary("DecorationStyle");
const dialog = reactive({
  title: "",
  visible: false,
});
const formRef = ref();
const layoutPlanFileLoading = ref(false);
const constructionDrawingFileLoading = ref(false);
const plumbingElectricalDrawingFileLoading = ref(false);
const renderingsFileLoading = ref(false);

const defaultFormData: ConsumerHouseDesignSchemeForm = {
  plumbingElectricalDrawingFile: [],
  constructionDrawingFile: [],
  houseId: 0,
  decorationStyle: "",
  layoutPlanFile: [],
  renderingsFile: [],
};
const formData = ref<ConsumerHouseDesignSchemeForm>({
  ...defaultFormData,
});
const loading = computed(
  () =>
    layoutPlanFileLoading.value ||
    constructionDrawingFileLoading.value ||
    plumbingElectricalDrawingFileLoading.value ||
    renderingsFileLoading.value
);

const formRules = reactive({
  categoryId: [{ required: true, message: "请选择分类", trigger: "change" }],
  budgetAmount: [{ required: true, message: "请输入预算金额", trigger: "blur" }],
  brandName: [{ required: true, message: "请输入意向品牌", trigger: "blur" }],
  decorationStyle: [{ required: true, message: "请选择装修风格", trigger: "change" }],
});
async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  try {
    await HouseAPI.houseDesignSchemeEdit({
      ...formData.value,
      plumbingElectricalDrawingFile: JSON.stringify(formData.value.plumbingElectricalDrawingFile),
      constructionDrawingFile: JSON.stringify(formData.value.constructionDrawingFile),
      renderingsFile: JSON.stringify(formData.value.renderingsFile),
      layoutPlanFile: JSON.stringify(formData.value.layoutPlanFile),
    });
    ElMessage.success("成功");
    emit("loadData");
    emit("backTo");
    handleCloseDialog();
  } catch (error) {
    console.log("error", error);
  }
}

function backTo() {
  emit("backTo");
}
// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  Object.assign(formData.value, defaultFormData);
  emit("update:modelValue", false); // 关闭弹窗
}
const canEdit = ref(true);
function showModal(val, cannotEdit = false) {
  dialog.visible = true;
  const { renderingsFile, layoutPlanFile, constructionDrawingFile, plumbingElectricalDrawingFile } =
    val.house.houseDesignSchemeVO || {};
  Object.assign(formData.value, defaultFormData, val.house.houseDesignSchemeVO, {
    houseId: val.houseId,
    plumbingElectricalDrawingFile: JSON.parse(plumbingElectricalDrawingFile || "[]"),
    constructionDrawingFile: JSON.parse(constructionDrawingFile || "[]"),
    renderingsFile: JSON.parse(renderingsFile || "[]"),
    layoutPlanFile: JSON.parse(layoutPlanFile || "[]"),
  });
  canEdit.value = !cannotEdit;
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
::v-deep(.el-tabs__content) {
  min-height: 100px;
  display: flex;
  align-items: center;
}
.conetr {
  background-color: #fff;
  position: relative;
  flex: 1;
  box-sizing: border-box;
  padding: 10px 20px;

  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
}
</style>
